<template>
	<page-frame back>
		<template #sticky>
			<view class="sticky-box">
				<up-search placeholder="请输入要搜索的内容" bgColor="transparent" height="72rpx" :showAction="false"
					searchIconColor="rgba(32, 128, 247, 1)" placeholderColor="rgba(197, 197, 197, 1)"
					borderColor="rgba(32, 128, 247, 1)" v-model="keyWord"></up-search>
				<view class="_search_btn" @click="getList()">搜索</view>
				<up-tabs :list="searchList" lineColor="#2080F7" :activeStyle="{color:'#2080F7'}"
					:inactiveStyle="{color:'#666666'}" :scrollable="false" @click="click"></up-tabs>
			</view>
		</template>
		<template #area>
			<!-- 名师 -->
			<block v-if="active==0 ">
				<view class="hot-teacher-box" v-if="dataList.teacherList.length>0">
					<teacher-index v-for="teacher in dataList.teacherList" :key="teacher.id"
						:teacher="teacher"></teacher-index>
				</view>
				<EmptyData v-else text="暂无讲师"></EmptyData>
			</block>
			<!-- 内训课 -->
			<block v-if="active==1">
				<mainClass v-for="course in dataList.mainClassList" :key="course.id" :course="course"
					v-if="dataList.mainClassList.length>0"></mainClass>
				<EmptyData v-else text="暂无内训课"></EmptyData>
			</block>
			<!-- 公开课 -->
			<block v-if="active==2 ">
				<openClass v-for="course in dataList.openCourseList" :key="course.id" :course="course"
					v-if="dataList.openCourseList.length>0"></openClass>
				<EmptyData v-else text="暂无公开课"></EmptyData>
			</block>
			<block v-if="active==3">
				<file-card v-for="data in dataList.fileDataList" :key="data.id" :data="data"
					v-if="dataList.fileDataList.length>0" />
				<EmptyData v-else text="暂无资料"></EmptyData>
			</block>
		</template>
	</page-frame>
</template>
<script setup>
	import {
		queryData
	} from '@/api/index.js'
	import EmptyData from '@/components/EmptyData.vue'
	import teacherIndex from "@/components/teacher-index.vue"
	import openClass from '@/components/class-open-index.vue';
	import fileCard from '@/components/file-card.vue'
	import PageFrame from "@/components/PageFrame.vue"
	import mainClass from '@/components/main_class_index.vue';
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const active = ref(0);
	const dataList = ref({
		teacherList: [], // 名师列表数据
		mainClassList: [], // 内训课列表数据
		openCourseList: [], // 公开课列表数据
		fileDataList: [] // 资料列表数据
	})
	const keyWord = ref(''); // 搜索关键字
	const searchList = reactive([{
			name: '名师'
		},
		{
			name: '内训课'
		},
		{
			name: '公开课'
		},
		{
			name: '资料'
		}
	]);
	// 定义方法  
	function click(item) {
		active.value = item.index
		uni.pageScrollTo({
			scrollTop: 1, //距离页面顶部的距离
			duration: 0 // 滚动动画时长
		})
	}
	//查询
	function getList() {
		queryData(keyWord.value).then(res => {
			dataList.value = res.data // 处理查询结果
		})
	}
	// 跳转到搜索页面
	onLoad((options) => {
		const word = options.keyword || ''
		if (!word) {
			return
		}
		keyWord.value = options.keyword
		getList()
	})
</script>

<style lang="scss">
	.sticky-box {
		position: relative;

		._search_btn {
			z-index: 9;
			position: absolute;
			right: 0;
			top: 0;
			width: 128rpx;
			height: 72rpx;
			background: #2080F7;
			border-radius: 72rpx 72rpx 72rpx 72rpx;
			border: 2rpx solid #2080F7;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 28rpx;
			font-weight: 500;
		}
	}

	.hot-teacher-box {
		// grid 2列
		display: grid;
		grid-template-columns: 1fr 1fr; // 2列，每列1fr（fraction 分数）的宽度，即平分剩余空间。
		grid-gap: 12px; // 列间距为12px。
	}
</style>